<template>
<el-dialog
  :title="tableName"
  :visible.sync="visible"
  width="30%"
  center
  @close="close">
    <el-form :model="formData" :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
        <el-form-item label="应用：" prop="appId">
            <el-select v-model="formData.appId" placeholder="请选择应用" @change="handleChange">
                <el-option v-for="app in appList" :key="app.id" :label="app.title" :value="app.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="分组：">
            <el-select v-model="formData.groupId" placeholder="请选择分组">
                <el-option v-for="group in groupList" :key="group.id"
                    :disabled="group.id === groupId" 
                    :label="group.name" :value="group.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="ok">确定</el-button>
    </span>
</el-dialog>
</template>

<script>
import { 
  getAppList,
  getAppDetail,
  } from "@/api/app";
import { 
  updateWorksheet,
  } from "@/api/worksheet";
export default {
    props: {
        visible: Boolean,
        pageType: String,
    },
    data(){
        return {
            tableName: '移动应用',
            formLabelWidth: '100px',
            formData: {
                appId: '',
                groupId: ''
            },
            appList: [],
            groupList: [],
            rules: {
                appId: [
                    { required: true, message: '请选择应用', trigger: 'change' }
                ],
                groupId: [
                    { required: true, message: '请选择分组', trigger: 'change' }
                ],
            }
        }
    },
    methods:{
        close(){
            this.$emit('close')
        },
        ok(){
            this.$refs['ruleForm'].validate(async (valid) => {
                if (valid) {
                    await updateWorksheet({
                        id: this.worksheetId,
                        appId: this.formData.appId,
                        groupId: this.formData.groupId,
                        type: this.pageType
                    })
                    this.$emit('success')
                } else {
                    return false;
                }
            });
        },
        async handleChange(value){
            let detail = await getAppDetail(value)
            this.groupList = detail?.worksheetGroupList || []
            this.formData.groupId = this.groupList[0]?.id || ""
        },
    },
    computed:{
        appId() {
            return this.$route.params.appId;
        },
        groupId() {
            return this.$route.params.groupId;
        },
        worksheetId() {
            return this.$route.params.worksheetId;
        },
        pageType() {
            return this.$props.pageType;
        }
    },
    async mounted(){
        let list = await getAppList()
        this.appList = list?.records || []
        let detail = await getAppDetail(this.appId)
        this.groupList = detail?.worksheetGroupList || []
        this.formData.appId = this.appId
        this.formData.groupId = this.groupList.find(g => g.id !== this.groupId)?.id || ""
    }
}
</script>

<style>

</style>